<template>
  <div class="mainBody">
    <van-collapse v-model="activeNames">
      <van-collapse-item title="工单内容" name="工单内容">
        <div slot="icon" class="flex flex-column flex-center">
          <van-icon><img class="icon" src="@/assets/img/icon_xmlr.png" alt=""></van-icon>
        </div>
        <my-cell v-for="(item,index) in todoListContenList" :key="'content'+index">
          <p slot="title">{{ item.title }}</p>
          <p slot="des">{{ item.des }}</p>
        </my-cell>
      </van-collapse-item>
      <van-collapse-item title="问题反馈" name="问题反馈">
        <div slot="icon" class="flex flex-column flex-center">
          <van-icon><img class="icon" src="@/assets/img/icon_xmlr.png" alt=""></van-icon>
        </div>
        <div class="problem">
          <my-cell v-for="(item,index) in todoListProblemList" :key="'content'+index">
            <p slot="title">{{ item.title }}</p>
            <p slot="des">{{ item.des }}</p>
          </my-cell>
          <p class="common">采购需求内家及省公司归口管理部门沟通意见：</p>

          <textarea class="common" v-model="departmentAdvice"></textarea>
          <p class="textNum">{{ departmentAdvice.length }}/150</p>
          <p class="common">建议采购项目完成时间：2020/12/31</p>
          <p class="common">附件：</p>
          <p class="common">问题回复：</p>
          <textarea class="common" v-model="problemAnswer"></textarea>
          <p class="textNum">{{ problemAnswer.length }}/150</p>
        </div>
      </van-collapse-item>
      <van-collapse-item title="审批处理" name="审批处理">
        <div slot="icon" class="flex flex-column flex-center">
          <van-icon><img class="icon" src="@/assets/img/icon_spls.png" alt=""></van-icon>
        </div>
        <div class="deal">
          <div>
            <div class="common3 flex flex-between"
                 v-for="(item,index) in isAgree" :key="'isagree'+index"
                 @click="onAgreeClick(index)">
              <p>{{ item }}</p>
              <img v-show="isAgreeIndex===index" class="chose" src="@/assets/img/chose.png">
            </div>

          </div>
          <div class="dealAdvice">
            <p class="common3">处理意见</p>
            <textarea class="common" v-model="dealAdvice"></textarea>
            <p class="textNum">{{ dealAdvice.length }}/150</p>
          </div>
        </div>
      </van-collapse-item>
      <van-collapse-item title="审批历史记录" name="审批历史记录">
        <div slot="icon" class="flex flex-column flex-center">
          <van-icon><img class="icon" src="@/assets/img/icon_spls.png" alt=""></van-icon>
        </div>
        <single-history-item :list="todoListHistoryList"></single-history-item>
      </van-collapse-item>
    </van-collapse>

    <!--  <van-cell title="下一环节" is-link arrow-direction="down" value="审批"/>-->
    <van-cell title="下一环节">
      <template #right-icon>
        <select>
          <option class="option" v-for="(item,index) in spList" :key="'spList'+index"
                  :value="item">{{item}}</option>
        </select>
      </template>
    </van-cell>
    <van-cell title="下一环节处理人" :value="nextHandler"/>
    <div class="add">
      <img src="@/assets/img/add.png" @click="goSelectHander">
    </div>
  </div>
</template>

<script>
import {todoListContenList, todoListProblemList, todoListHistoryList, spList,nextHandler} from "@/data/todoList";
import Vue from 'vue';
import {Collapse, CollapseItem, Icon, Cell, CellGroup} from 'vant';
import SingleHistoryItem from "./singleHistoryItem";
import MyCell from "../../components/myCell";

Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Icon);
export default {
  name: "mainBody",
  components: {MyCell, SingleHistoryItem},
  data() {
    return {
      activeNames: [''],
      todoListContenList,
      todoListProblemList,
      todoListHistoryList,
      spList,
      nextHandler,
      departmentAdvice: "",
      problemAnswer: "",
      dealAdvice: "",
      isAgree: ["同意", "不同意"],
      isAgreeIndex: 0,
    };
  },
  methods: {
    onAgreeClick(index) {
      this.isAgreeIndex = index;
    },
    goSelectHander() {
      this.$router.push("/selectHander")
    }
  }
}
</script>

<style lang="less" scoped>
.icon {
  width: .6rem;
  height: .6rem;
  margin: 0 .2rem 0 0;
}

.textNum {
  margin: .1rem .1rem 0 0;
  text-align: right;
}

textarea {
  width: 9rem;
  height: 2.5rem;
  border: .01rem solid #d7d7d7;
}

.deal {
  .chose {
    width: .4rem;
    height: .4rem;
  }

  .common3 {
    padding: .2rem 0;
    font-size: .4rem;
    color: #000;
  }

  .dealAdvice {
    border-top: .2rem solid #F5F5F5;

    .textTum {
      margin: .1rem .1rem 0 0;
      text-align: right;
    }
  }
}

.add {
  padding: .6rem 0 .6rem .4rem;
  border-top: .01rem solid #F2F2F2;
  border-bottom: .01rem solid #F2F2F2;
  background-color: #fff;

  img {
    width: 1.2rem;
    height: 1.2rem;
  }
}

.common {
  padding: .1rem 0;
  font-size: .4rem;
  color: #000;
}
.option{
  font-size: .1rem;
}

</style>